<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>程序员常用样式</title>
    <style>
        .mydiv{
            width:300px;
            height:300px;
            /*背景色*/
            background-color: blue;
            /*文字颜色*/
            color:white;
            /*让div在网页上居中显示*/
            margin:0 auto;
            /*文字对齐方式，此处是居中对齐*/
            text-align: center;
        }

        .uname {
            width:420px;
            height:35px;
            border-radius: 5px;
            /*边框宽度1像素、实线、红色边框*/
            /* border:1px solid red; */
            border:2px dotted #299E59;
            background-color: azure;
        }
    </style>
</head>
<body>
<h1>背景样式</h1>
<div class="mydiv">
    今天天气不错！
</div>
<input type="text" style="background-color: red;"/>

<h1>边框样式</h1>
用户名<input type="text" class="uname">
</body>
</html>